<template>
	<view style="overflow: hidden;">
		<view class="box">
			<scroll-view style="width: 100%;max-height: 100vh;" @scrolltolower="scrolltolower" scroll-y="true">
				<Model v-if="isShow" @firstLogin="firstLogin" />
				<!-- 修改样式时注意此处使用了插槽和组件 -->
				<!-- <Header>
					<template #header>
						{{ header }}
					</template>
				</Header> -->
				<view class="banner">
					<image :src="swiper" mode=""></image>
				</view>
				<view class="icon">
					<view class="item" v-for="(item,index) in productTest" :key="item.categoryId"
						:class="{itemClass:categoryIdData===item.categoryId}" @click="itemClick(index,item.categoryId)">
						<image :src="item.image" mode=""></image>
						<span>{{item.categoryName}}</span>
					</view>
				</view>
				<view class="select">
					<view class="select-top">
						<view class="tabs">
							<view class="tab" v-for="(tab, index) in tabs" :key="index"
								@click="selectTab(tab.code,tab.categoryId)">
								<text class="tab-text" :class="{word:currentIndex === tab.code}">{{ tab.title }}</text>
								<view class="tab-marker" :class="{ 'active': currentIndex === tab.code }"></view>
							</view>
						</view>
					</view>
					<view class="select-bottom">
						<view class="tabs">
							<view class="tab" v-for="(tab, index) in tabs1" :key="index"
								@click="selectTab1(tab.code,tab.categoryId)">
								<text class="tab-text" :class="{word:currentIndex1 === tab.code}">{{ tab.title }}</text>
								<view class="tab-marker" :class="{ 'active': currentIndex1 === tab.code }"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="scroll">
					<view class="scroll-view">
						<view class="scroll-box" v-for="item in goodsData" :key="item.goodsId">
							<view class="top" @click="detailClick(item.goodsId)">
								<view class="title-button">
									<button>次月返</button>
									<span
										style="margin-left: 5rpx;">{{item.goodsName.length>=23?item.goodsName.slice(0,23)+'...':item.goodsName}}</span>
								</view>
								<view class="detail">
									<view class="jing" v-if="item.sellPoint.split(',')[0]">
										{{ item.sellPoint.split(",")[0] }}
									</view>
									<view class="ji" v-if="item.sellPoint.split(',')[1]">
										{{ item.sellPoint.split(',')[1] }}
									</view>
								</view>
								<view class="main">
									<view class="main-left">

										<image :src="item.mainImg" mode=""></image>
									</view>
									<view class="main-right">
										<view class="num">
											商品编号: {{item.goodsId}}
											<!-- <image src="../../static/icon.jpg" mode=""></image> -->
											<!-- <u-icon name="file-text" size="28" class="image"></u-icon> -->
										</view>
										<view class="content">
											<view class="content-item">
												<span>运营商</span>
												<span>{{operatorsApi(item.operators)}}</span>
											</view>
											<view class="line"></view>
											<view class="content-item">
												<span>归属地</span>
												<span>{{item.belongPlace}}</span>
											</view>
											<view class="line"></view>
											<view class="content-item">
												<span>售价</span>
												<span style="color: red;">免费</span>
											</view>
										</view>
										<view class="botton-button">
											<view class="botton-button-left">年龄:{{item.age}}</view>
											<view class="botton-button-right" @click.stop="resion(item)">禁发区域</view>
										</view>
									</view>
								</view>
							</view>
							<view class="bottom">
								<view class="title">
									<view class="rule">
										<span style="margin-right: 10rpx;">结算规则 :</span>
										<span style="color: blueviolet;"
											@click="lookClick(0,item.goodsRule,item.goodsId)">点击查看</span>
									</view>
									<view class="production">
										<span style="margin-right: 10rpx;">产品备注 :</span>
										<span style="color: blueviolet;"
											@click="lookClick(1,item.remake,item.goodsId)">点击查看</span>
									</view>
								</view>
								<view class="tab" v-if="tabShow && position==item.goodsId">
									{{tabIf}}
								</view>
								<view class="tab" v-if="tabShow1  && position==item.goodsId">
									{{tabIf1}}
								</view>
								<view class="progress">
									<span>收入佣金: ¥{{item.incomeCommission}}</span>
									<view class="promotion" style="margin:0 60rpx 0 80rpx"
										@click="promotionClick(item.goodsId)">推广链接
									</view>
									<view class="promotion" @click="paper(item.goodsId,item.mainImg)">生成海报</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="link" v-if="linkShow">
					<view class="title" style="display: flex;flex-direction: column;align-items: center;">
						<view class="tip">海报分享</view>
						<!-- canvas 用于绘制海报 -->
						<!-- <canvas canvas-id="posterCanvas" style="width: 616rpx; height: 700rpx;"></canvas> -->
						<!-- 下载按钮 -->
						<view class="canvasImg"
							style="width: 584rpx; height: 610rpx;padding: 0 16rpx;box-sizing: border-box;">
							<image :src="complete" @longpress="handleLongPress" style="width: 100%;height: 100%;"
								mode="aspectFit"></image>
						</view>
						<view
							style="color: #999;font-size: 14px;text-align: center;width: 100%;height: 50rpx;line-height: 50rpx;margin-bottom: 40rpx;">
							长按图片保存(或点击按钮下载)</view>
						<view class="active">
							<view class="active-left" @click="close">关闭</view>
							<view class="active-right" @click="downloadPoster">下载图片</view>
						</view>
					</view>
				</view>
				<!-- 禁发区域 -->
				<view class="forbid" v-if="forbid">
					<view class="title">

						<view class="slot">
							<view class="white"></view>
							<view class="tip">禁发区域</view>
							<!-- <img src="../../static/yidong.jpg" alt="" @click="imgClose" /> -->
							<u-icon name="close" @click="imgClose"></u-icon>
						</view>
						<view class="main">{{forbidData}}</view>
					</view>
				</view>
				<view class="grace-loading" v-if="isLoadAll">{{ bottomText }}</view>
			</scroll-view>
			<!-- 点击链接的模态框 -->
			<view class="linkName" v-if="linkModel">
				<view class="lineBox">

					<!-- <view class="lineItem" @click="goToExternalPage">
						打开链接
						<web-view :src="lineSrc" v-if="showWebView"></web-view> -->
					<!-- <navigator :url='lineSrc' open-type='navigate'>打开链接</navigator> -->
					<!-- <web-view :url='lineSrc' class="lineClass">打开链接</web-view> -->
					<!-- </view> -->
					<view class="lineItem" @click="copeLine">复制链接</view>
				</view>
			</view>
			<view class="msgApp" v-if="msgAppModel">
				<view class="container">
					<view class="image">
						<image src="./../../static/msgApp.jpg" mode=""></image>
					</view>
					<view class="msgTitle">{{msgObject.title}}</view>
					<view class="msgContent">{{msgObject.content}}</view>
					<view class="msgButton">
						<u-button type="primary" style="width: 30%;height: 100%;" @click="msgTab(0)">我知道了</u-button>
						<u-button type="primary" style="width: 30%;height: 100%;" @click="msgTab(1)">下一页</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>


<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		qrCode,
		newMsg,
		swiper
	} from "@/apis/qrcode.js"
	import {
		goodsList,
		userDeail
	} from "@/apis/goods.js"
	export default {
		data() {
			return {
				header: '首页',
				isShow: false,
				// iconData: [{
				// 		src: '../../static/order/order-one.jpg',
				// 		name: '电话卡'
				// 	},
				// 	{
				// 		src: '../../static/order/order-two.jpg',
				// 		name: '流量卡'
				// 	},
				// 	{
				// 		src: '../../static/order/order-three.jpg',
				// 		name: '宽带'
				// 	},
				// 	{
				// 		src: '../../static/order/order-four.jpg',
				// 		name: '靓号'
				// 	},
				// 	{
				// 		src: '../../static/order/order-five.jpg',
				// 		name: '充值'
				// 	}
				// ],
				// itemData: 0,
				tabs: [{
						title: '全部',
						code: ''
					},
					{
						title: '移动',
						code: '1'
					},
					{
						title: '联通',
						code: '2'
					},
					{
						title: '电信',
						code: '3'
					},
					{
						title: '广电',
						code: '4'
					}
				],
				currentIndex: '', // 当前选中的tab索引
				tabs1: [{
						title: '次月返',
						code: '1'
					},
					{
						title: '秒返',
						code: '2'
					}
				],
				currentIndex1: '1', // 当前选中的tab索引
				tabIf: '',
				tabIf1: '',
				tabShow: false,
				tabShow1: false,
				showModalContent: false,
				linkShow: false,
				forbid: false,
				forbidData: '',
				position: null,
				paperData: '',
				mainImgData: '',
				categoryIdData: '',
				currentPage: 1, // 当前页码
				pageSize: 3, // 每页显示的数量
				total: 0, // 总页数
				goodsData: [],
				isLoadAll: true,
				linkModel: false,
				lineSrc: '',
				msgData: [],
				msgObject: [],
				msgAppModel: false,
				showWebView: false,
				swiper: '',
				// externalPageUrl: 'https://example.com/your-h5-page.html' // 替换为你的H5页面链接
				complete: ''
			}
		},
		created() {
			//判断是否弹出佣金的框
			// if (uni.getStorageSync("isFirstLogin") == '0') {
			// 	this.isShow = false;
			// } else if (uni.getStorageSync("isFirstLogin") == '1') {
			// 	this.isShow = true;
			// 	return;
			// }
			// const userDetailModel = await userDeail();
			// if (!userDetailModel.data) {
			// 	this.isShow = true;
			// 	return;
			// } else {
			// 	this.isShow = false;
			// }

			// const res = await newMsg();

			// if (res.code === 200) {
			// 	if (res.data.length != 0) {
			// 		this.msgAppModel = true;
			// 		this.msgData = res.data;
			// 		this.msgObject = this.msgData[0];
			// 	}
			// };

			// newMsg()
			// 	.then(res => {
			// 		if (res.code === 200) {
			// 			if (res.data.length != 0) {
			// 				this.msgAppModel = true;
			// 				this.msgData = res.data;
			// 				this.msgObject = this.msgData[0];
			// 			}
			// 		}
			// 	})
		},
		async onShow() {
			// console.log('uni.getSystemInfoSync().platform', uni.getSystemInfoSync().uniPlatform)


			this.linkModel = false;
			this.linkShow = false;
			// productTestApi的原始用法
			const productData = await this.$store.dispatch("productTestApi");

			this.categoryIdData = this.productTest[0].categoryId;

			this.currentIndex = this.tabs[0].code;

			const goodsListShow = await goodsList({
				categoryId: this.categoryIdData,
				operators: this.currentIndex,
				rebateRule: this.currentIndex1,
				size: this.pageSize,
				current: this.currentPage,
			})
			const {
				records
			} = goodsListShow.data;
			if (goodsListShow.code === 200) {
				this.goodsData = [...records];
			}

			const swiperShow = await swiper();
			if (swiperShow.code === 200) {
				this.swiper = swiperShow.data[0].url;
			}

			const userDeailsShow = await userDeail();
			if (userDeailsShow.code === 200) {
				if (!userDeailsShow.data) {
					this.isShow = true;
					return;
				} else {
					this.isShow = false;
				}
			}

			const newMsgShow = await newMsg();
			if (newMsgShow.code === 200) {
				if (newMsgShow.data.length != 0) {
					this.msgAppModel = true;
					this.msgData = newMsgShow.data;
					this.msgObject = this.msgData[0];
				}
			}

			// goodsList({
			// 		categoryId: this.categoryIdData,
			// 		operators: this.currentIndex,
			// 		rebateRule: this.currentIndex1,
			// 		size: this.pageSize,
			// 		current: this.currentPage,
			// 	})
			// 	.then(res => {
			// 		const {
			// 			records
			// 		} = res.data;
			// 		this.goodsData = [...records];
			// 	})
			// swiper()
			// 	.then(res => {
			// 		this.swiper = res.data[0].url;
			// 	})

			// userDeail()
			// 	.then(res => {
			// 		if (!res.data) {
			// 			this.isShow = true;
			// 			return;
			// 		} else {
			// 			this.isShow = false;
			// 		}
			// 	})

			// newMsg()
			// 	.then(res => {
			// 		if (res.code === 200) {
			// 			if (res.data.length != 0) {
			// 				this.msgAppModel = true;
			// 				this.msgData = res.data;
			// 				this.msgObject = this.msgData[0];
			// 			}
			// 		};
			// 	})
		},
		computed: {
			...mapState(['productTest']),
			bottomText() {
				if (this.goodsData.length < this.total && this.goodsData.length !== 0) {
					return "加载中..."
				} else {
					return "---没有更多数据---";
				}
			}
		},
		methods: {
			handleLongPress() {
				// 这里不能直接保存图片到相册，只能提示用户如何操作
				uni.showToast({
					title: '请长按图片保存到相册',
					icon: 'none'
				});
			},

			goToExternalPage() {
				console.log('lineSrc', this.lineSrc)
				this.showWebView = true;
				// this.linkModel = false;
			},
			msgTab(val) {
				if (val == 0) {
					this.msgAppModel = false;
				} else if (val == 1) {
					//点击下一页
					let myval = 1;
					this.msgObject = this.msgData[myval++];
				}

			},
			//打开链接
			//  openLine() {

			// },
			//复制链接
			copeLine() {
				const textToCopy = this.lineSrc;
				let that = this;
				uni.setClipboardData({
					data: textToCopy,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
						that.linkModel = false;
						console.log('asdad999', that.linkModel)
					},
					fail: function(err) {
						that.linkModel = false;
						console.log('复制失败', err);
					}
				});
			},
			async promotionClick(val) {
				this.paperData = val;
				this.linkModel = true;
				const qrCodeData = await qrCode(val);
				console.log('qrCodeData', qrCodeData)
				if (qrCodeData.code == 200) {
					this.lineSrc = qrCodeData.data.extensionUrl;
					console.log('asdadas777', this.lineSrc)
				}
			},
			// ...mapActions(['goodsDataApi']),
			//产品详情页面
			detailClick(val) {
				uni.navigateTo({
					url: `/pages/productDetail/productDetail?goodsId=${val}`
				})
			},
			operatorsApi(val) {
				if (val === 1) return '移动';
				else if (val === 2) return '联通'
				else if (val === 3) return '电信'
				else if (val === 4) return '广电'
			},
			deviceAbnormalData() {
				//当list的长度刚好和total（总条数）一样，且list长度不为0的时候，说明，数据已经获取完毕，
				if (this.goodsData.length == this.total && this.goodsData.length != 0) {
					return;
				};
				this.currentPage = this.currentPage + 1;
				return goodsList({
						categoryId: this.categoryIdData,
						operators: this.currentIndex,
						rebateRule: this.currentIndex1,
						size: this.pageSize,
						current: this.currentPage,
					})
					.then(res => {
						const {
							total,
							records
						} = res.data;
						if (this.goodsData) {
							this.goodsData = [...this.goodsData, ...records];
						} else {
							this.goodsData = [...records];
						}
						this.total = total;
					})
			},
			scrolltolower() {
				this.deviceAbnormalData();
			},
			resion(val) {
				this.forbidData = val.banSendPlace;
				this.forbid = true;
			},
			imgClose() {
				this.forbid = false;
			},
			async paper(val, key) {
				this.linkShow = true;
				this.paperData = val;
				this.mainImgData = key;
				// this.drawPoster();
				const qrCodeData = await qrCode(val);
				if (qrCodeData.code == 200) {
					this.complete = qrCodeData.data.qrcodeUrl;
				}
			},

			//关闭按钮
			close() {
				this.linkShow = false;
			},
			//二维码
			// async qrCodeGet() {
			// 	const qrCodeData = await qrCode(this.paperData);
			// 	console.log('qrCodeData1111',qrCodeData)

			// },
			// 绘制海报
			// async drawPoster() {
			// 	const qrCodeData = await qrCode(this.paperData);
			// 	console.log('xiuxixiuxi', qrCodeData)
			// 	const ctx = uni.createCanvasContext('posterCanvas');

			// 	// 绘制背景
			// 	ctx.setFillStyle('#ffffff');
			// 	ctx.fillRect(0, 0, 300, 400);

			// 	// 绘制图片1
			// 	let img = new Image();

			// 	img.crossOrigin = "anonymous"; // 设置跨域属性
			// 	if (this.mainImgData != '') {
			// 		// console.log('hahahh3333',)

			// 		img = await uni.getImageInfo({
			// 			src: this.mainImgData
			// 		});

			// 	}
			// 	// console.log('myimg', img1, img1.path)
			// 	ctx.drawImage(img.path, 0, 0, 308, 230);
			// 	// if (qrCodeData.code == 200) {
			// 	// 	// 绘制图片2
			// 	// 	// let img2 = new Image();

			// 	// 	// img2.crossOrigin="Anonymous";
			// 	// 	const img2 = await uni.getImageInfo({
			// 	// 		src: qrCodeData.data.qrcodeUrl
			// 	// 	});
			// 	// 	// img2.crossOrigin = "anonymous"; // 设置跨域属性
			// 	// 	ctx.drawImage(img2.path, 30, 250, 100, 100);
			// 	// }
			// 	// let img3;
			// 	// // img3.crossOrigin = "anonymous"; // 设置跨域属性
			// 	// img3 = await uni.getImageInfo({
			// 	// 	// src:"./../../static/free.jpg"
			// 	// 	src: 'https://sslc-oss.oss-cn-chengdu.aliyuncs.com/distribution/images/2024/04/06/share01.jpg'
			// 	// });
			// 	// ctx.drawImage(img3.path, 170, 250, 100, 100);
			// 	// ... 可以继续绘制其他内容

			// 	// 绘制完成，将内容输出到canvas
			// 	ctx.draw(true, () => {
			// 		// 绘制完成后的回调
			// 	});
			// },

			firstLogin() {
				this.isShow = false;
				// console.log('比例')
				// 此处是分润有弹框的时候再弹出通知框
				newMsg()
					.then(res => {
						if (res.code === 200) {
							if (res.data.length != 0) {
								this.msgAppModel = true;
								this.msgData = res.data;
								this.msgObject = this.msgData[0];
							}
						}
					})
			},
			itemClick(val, key) {
				this.currentPage = 1;
				this.total = 0;
				//产品的id
				this.categoryIdData = key;
				// goodsList({
				// 	operators: this.currentIndex1 + 1,
				// 	rebateRule: this.currentIndex + 1,
				// 	categoryId: key[val].categoryId,
				// 	size: this.pageSize,
				// 	current: this.currentPage
				// })
				goodsList({
						categoryId: this.categoryIdData,
						operators: this.currentIndex,
						rebateRule: this.currentIndex1,
						size: this.pageSize,
						current: this.currentPage,
					})
					.then(res => {
						const {
							total,
							records
						} = res.data;
						this.goodsData = [...records];
					})
			},
			selectTab(index) {
				this.currentPage = 1;
				this.total = 0
				this.currentIndex = index;
				// 这里可以添加切换tab时触发的其他逻辑，比如页面滚动、数据加载等
				goodsList({
						categoryId: this.categoryIdData,
						operators: this.currentIndex,
						rebateRule: this.currentIndex1,
						size: this.pageSize,
						current: this.currentPage,
					})
					.then(res => {
						const {
							records
						} = res.data;
						this.goodsData = [...records];

					})
			},
			selectTab1(index) {
				this.currentPage = 1;
				this.total = 0;
				this.currentIndex1 = index;
				goodsList({
						categoryId: this.categoryIdData,
						operators: this.currentIndex,
						rebateRule: this.currentIndex1,
						size: this.pageSize,
						current: this.currentPage,
					})
					.then(res => {
						const {
							records
						} = res.data;
						this.goodsData = [...records];
					})
			},
			lookClick(val, key, hat) {
				this.position = hat;
				if (val === 0) {
					this.tabShow1 = false;
					this.tabShow = !this.tabShow;
					this.tabIf = key;
				} else if (val === 1) {
					this.tabShow = false;
					this.tabShow1 = !this.tabShow1;
					this.tabIf1 = key;
				}
			},
			// 下载海报到相册(非h5和web才能使用saveImageToPhotosAlbum)
			async downloadPoster() {
				try {
					// 假设你有一个图片的 URL
					const imageUrl = this.complete;

					// 下载图片到本地临时文件
					const downloadTask = uni.downloadFile({
						url: imageUrl,
						success: (res) => {
							if (res.statusCode === 200) {
								const tempFilePath = res.tempFilePath;

								// 保存图片到相册
								uni.saveImageToPhotosAlbum({
									filePath: tempFilePath,
									success: () => {
										uni.showToast({
											title: '图片已保存到相册',
											icon: 'success'
										});
									},
									fail: (err) => {
										uni.showToast({
											title: '保存图片失败：' + err.errMsg,
											icon: 'none'
										});
									}
								});
							} else {
								uni.showToast({
									title: '图片下载失败',
									icon: 'none'
								});
							}
						}
					});
					// 监听下载进度变化
					downloadTask.onProgressUpdate((res) => {
						// console.log('下载进度', res.progress);
						// 可以在这里更新 UI，显示下载进度
					});
				} catch (error) {
					// console.error('保存图片过程中发生错误', error);
					uni.showToast({
						title: '保存图片失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.modal-image {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}



	.box {
		width: 750rpx;
		height: 94vh;
		// margin-top: 180rpx;
		// padding-top: 180rpx;
		// padding-bottom: 30rpx;
		// box-sizing: border-box;
		background-color: #F0EFF4;
		overflow: hidden;
		padding-top: 40rpx;
		box-sizing: border-box;

		.banner {
			height: 300rpx;
			width: 750rpx;
			padding: 8rpx 4rpx 18rpx 4rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.icon {
			height: 160rpx;
			width: 710rpx;
			margin: 8rpx 20rpx 10rpx 20rpx;
			background-color: white;
			border-radius: 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 6rpx;
			box-sizing: border-box;

			.item {
				height: 100%;
				width: 25%;
				border: 4rpx solid white;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				color: #2FA0FE;
				font-size: 18rpx;

				image {
					height: 62rpx;
					width: 62rpx;
				}
			}

			.itemClass {
				border: 4rpx solid sandybrown;
			}
		}

		.select {
			height: 180rpx;
			width: 710rpx;
			margin: 8rpx 20rpx 10rpx 20rpx;
			background-color: white;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;

			.select-top {
				height: 55%;
				width: 100%;

				.tabs {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 100%;
					width: 100%;
				}

				.tab {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 100%;
					width: 50%;
					overflow: hidden;
				}

				.tab-text {
					/* 文字样式 */
					color: gray;
				}

				.word {
					color: black;
				}

				.tab-marker {
					width: 0;
					height: 2px;
					background-color: #2FA0FE;
					/* 标记颜色 */
					transition: width 0.4s ease;
					/* 动画效果 */
					margin-top: 10rpx;
				}

				.tab-marker.active {
					width: 30%;
					/* 当标记为激活状态时，宽度为100% */
				}
			}

			.select-bottom {
				height: 45%;
				width: 100%;

				.tabs {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 100%;
					width: 100%;
				}

				.tab {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 100%;
					width: 50%;
					overflow: hidden;
				}

				.tab-text {
					/* 文字样式 */
					font-size: 29rpx;
					font-weight: bolder;
				}

				.tab-marker {
					width: 0;
					height: 2px;
					background-color: #2FA0FE;
					/* 标记颜色 */
					transition: width 0.4s ease;
					/* 动画效果 */
					margin-top: 10rpx;
				}

				.word {
					color: #2FA0FE;

				}

				.tab-marker.active {
					width: 12%;
					/* 当标记为激活状态时，宽度为100% */

				}
			}

		}

		.scroll {
			width: 710rpx;
			// min-height: 100vh;
			margin: 8rpx 20rpx 0rpx 20rpx;

			.scroll-view {
				width: 710rpx;
				// border: 1rpx solid red;
				// margin-bottom: 50rpx;
				// min-height: 400rpx;
				// overflow: hidden;
				// margin-bottom: 30rpx;
				// min-height: 300rpx;


				.scroll-box {
					width: 100%;
					background-color: white;
					margin-bottom: 30rpx;
					border-radius: 20rpx;
					// height: 570rpx;

					.top {
						width: 100%;
						height: 58%;
						padding: 6rpx 0rpx 0 0rpx;
						box-sizing: border-box;

						.title-button {
							width: 100%;
							height: 45rpx;
							display: flex;
							justify-content: flex-start;
							padding: 0 12rpx;
							box-sizing: border-box;

							button {
								width: 105rpx;
								height: 40rpx;
								font-size: 17rpx;
								margin: 0;
								background-color: #2FA0FE;
								color: white;
								line-height: 40rpx;
								text-align: center;
							}

							span {
								font-weight: bolder;
							}
						}

						.detail {
							width: 100%;
							height: 50rpx;
							display: flex;
							font-size: 23rpx;
							padding: 0 12rpx;
							box-sizing: border-box;

							.jing,
							.ji {
								min-width: 110rpx;
								height: 45rpx;
								color: #F76961;
								border: 1rpx solid #F76961;
								text-align: center;
								line-height: 45rpx;
								margin-right: 3rpx;
							}
						}

						.main {
							width: 100%;
							height: 200rpx;
							display: flex;
							padding: 0 12rpx 3rpx 12rpx;
							box-sizing: border-box;
							border-bottom: 1rpx dashed pink;

							.main-left {
								height: 100%;
								width: 200rpx;
								margin-right: 5rpx;

								image {
									width: 100%;
									height: 100%;

								}
							}

							.main-right {
								flex-grow: 1;
								padding: 6rpx 0 0 4rpx;
								box-sizing: border-box;

								.num {
									font-size: 29rpx;
									font-weight: bold;
									display: flex;
									align-items: center;

									.image {
										width: 20rpx;
										height: 20rpx;
										margin-left: 12rpx;
									}
								}

								.content {
									width: 100%;
									height: 88rpx;
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-bottom: 8rpx;

									.content-item {
										height: 100%;
										width: 30%;
										display: flex;
										flex-direction: column;
										justify-content: space-around;
										align-items: center;
										font-size: 25rpx;
										font-weight: bold;
									}

									.line {
										height: 70%;
										border: 2rpx solid gray;
									}
								}

								.botton-button {
									width: 100%;
									display: flex;
									justify-content: space-around;
									align-items: center;

									.botton-button-left,
									.botton-button-right {
										height: 48rpx;
										line-height: 48rpx;
										text-align: center;
										border-radius: 6rpx;
										font-size: 25rpx;
									}

									.botton-button-left {
										width: 170rpx;
										border: 1rpx solid #4E9CEA;
										background-color: #EBF3FF;
										color: #4E9CEA;
									}

									.botton-button-right {
										width: 150rpx;
										background-color: #2FA0FE;
										color: white;
									}
								}
							}
						}
					}

					.bottom {
						height: 42%;
						width: 100%;
						padding: 6rpx 16rpx 0 12rpx;
						box-sizing: border-box;

						.title {
							display: flex;
							align-items: center;
							font-size: 25rpx;

							.rule {
								margin-right: 50rpx;
							}
						}

						.tab {
							color: lightgray;
							font-size: 26rpx;
							// height: 90rpx;
							width: 100%;
							word-break: break-all;
						}

						.progress {
							height: 110rpx;
							width: 100%;
							display: flex;
							align-items: center;

							.promotion {
								width: 160rpx;
								height: 40rpx;
								border-radius: 15rpx;
								background-color: #FD4626;
								color: white;
								line-height: 40rpx;
								text-align: center;
								font-size: 26rpx;
							}

							span {
								font-size: 26rpx;
								font-weight: bold;
								color: #F80304;
							}
						}
					}
				}
			}
		}

		.link {
			position: fixed;
			z-index: 9;
			background-color: rgba(51, 51, 51, 0.5);
			top: 0;
			left: 0;
			width: 750rpx;
			min-height: 100vh;
			overflow: hidden;

			.title {
				height: 865rpx;
				width: 620rpx;
				margin-top: 400rpx;
				margin-left: 65rpx;
				background-color: white;
				border-radius: 30rpx;


				.tip {
					height: 80rpx;
					width: 100%;
					text-align: center;
					line-height: 80rpx;
					font-size: 29rpx;
					font-weight: bold;
				}

				.active {
					height: 80rpx;
					width: 620rpx;
					display: flex;

					// .active-left{
					// 	height: 100%;
					// 	width: 100%;
					// 	text-align: center;
					// 	line-height: 80rpx;
					// 	border-top: 1rpx solid gainsboro;
					// }
					.active-left,
					.active-right {
						height: 100%;
						width: 50%;
						text-align: center;
						line-height: 80rpx;
						border-top: 1rpx solid gainsboro;
					}

					.active-left {
						border-right: 1rpx solid gainsboro;
					}
				}
			}
		}

		.forbid {
			position: fixed;
			z-index: 9;
			background-color: rgba(51, 51, 51, 0.5);
			top: 0;
			left: 0;
			width: 750rpx;
			min-height: 100vh;
			overflow: hidden;

			.title {
				// min-height: 445rpx;
				width: 580rpx;
				margin-top: 600rpx;
				margin-left: 85rpx;
				background-color: white;
				border-radius: 30rpx;
				padding: 30rpx 32rpx 30rpx 32rpx;
				box-sizing: border-box;

				.slot {
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10px;

					img {
						width: 40rpx;
						height: 40rpx;
					}

					.tip {
						font-size: 30rpx;
						font-weight: bold;
					}

					.white {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.main {
					width: 100%;
					white-space: pre-wrap;
					word-wrap: break-word;
				}
			}
		}
	}

	.grace-loading {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-weight: bold;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}

	.linkName {
		position: fixed;
		z-index: 9;
		left: 0;
		top: 0;
		background-color: rgba(51, 51, 51, 0.5);
		width: 750rpx;
		min-height: 100vh;

		.lineBox {
			position: fixed;
			z-index: 9;
			left: 0;
			bottom: 114rpx;
			background-color: white;
			width: 750rpx;
			height: 130rpx;

			.lineItem {
				width: 750rpx;
				height: 100%;
				border-bottom: 1rpx solid darkgray;
				font-size: 32rpx;
				font-weight: 1000;
				line-height: 130rpx;
				text-align: center;

				.lineClass {
					width: 100%;
					height: 100%;
				}
			}
		}

	}

	.msgApp {
		position: fixed;
		z-index: 9;
		left: 0;
		top: 0;
		background-color: rgba(51, 51, 51, 0.5);
		width: 750rpx;
		min-height: 100vh;
		padding: 420rpx 65rpx 0 65rpx;
		box-sizing: border-box;

		.container {
			width: 100%;
			min-height: 800rpx;
			background-color: white;
			border-radius: 30rpx;
			position: relative;

			.image {
				width: 100%;
				height: 230rpx;
				margin-bottom: 40rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 30rpx;
				}
			}

			.msgTitle {
				width: 100%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
			}

			.msgContent {
				padding: 0 10rpx;
				box-sizing: border-box;
				width: 100%;
				word-wrap: break-word;
			}

			.msgButton {
				position: absolute;
				bottom: 70rpx;
				left: 0;
				width: 100%;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-radius: 30rpx;
			}
		}
	}
</style>